<template>
  <div class="form-single-fragment" style="position: relative;">
    <h3>查看</h3>
    <el-form :model="ruleForm" ref="ruleForm" label-width="140px" size="mini" label-position="left">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="20">
          <div class="title"><h4>员工信息</h4></div>
          <el-row>
            <el-col :span="6">
              <label>姓名：</label><span>{{infoData.showName}}</span>
            </el-col>
            <el-col :span="6">
              <label>所属部门：</label><span>{{infoData.deptIdDictMapname}}</span>
            </el-col>
            <el-col :span="6">
              <label>职务：</label><span>{{infoData.userTypeDictMapname}}</span>
            </el-col>
            <el-col :span="6">
              <label>手机：</label><span>{{infoData.mobile}}</span>
            </el-col>
          </el-row>
          <div class="title"><h4>积分数据</h4></div>
          <el-row>
            <el-col :span="6">
              <label>累计积分：</label><span>{{ruleForm.cumulativeScore}}</span>
            </el-col>
            <el-col :span="6">
              <label>本年度积分：</label><span>{{ruleForm.yearScore}}</span>
            </el-col>
            <el-col :span="6">
              <label>累计参与项目次数：</label><span>{{ruleForm.cumulativeTimesOfProjects}}</span>
            </el-col>
            <el-col :span="6">
              <label>本年度参与项目次数：</label><span>{{ruleForm.yearTimesOfProjects}}</span>
            </el-col>
          </el-row>
          <div class="title">
            <h4>积分记录</h4>
          </div>
          <el-table :data="tableData" size="mini" style="width: 100%;" header-cell-class-name="table-header-gray">
            <el-table-column type="index" align="center" width="55" label="序号"></el-table-column>
            <el-table-column prop="projectName" align="center" label="项目名称"></el-table-column>
            <el-table-column prop="scoringUserName" align="center" label="操作人"></el-table-column>
            <el-table-column prop="scoringDate" align="center" label="操作时间"></el-table-column>
            <el-table-column prop="score" align="center" label="积分"></el-table-column>
            <!-- <el-table-column prop="yearScore" align="center" label="操作后本年度积分"></el-table-column> -->
          </el-table>
          <el-row type="flex" justify="end" style="margin-top: 10px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNo"
              :page-size="page_size"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, prev, pager, next, sizes"
              :total="total"></el-pagination>
          </el-row>
        </el-col>
      </el-row>
      <el-form-item style="padding: 20px 0;">
        <el-button size="mini" @click="resetForm">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Personalintergral } from '@/api/integrals.js';
import { SysUserController } from '@/api';
export default {
  name: 'PersonalrecordDetail',
  data () {
    return {
      loading: false,
      isShowloading: false,
      total: 0,
      page_size: 10,
      pageNo: 1,
      customerlist: [],
      tableData: [],
      infoData: {},
      ruleForm: {}
    };
  },
  created () {
    this.ruleForm = this.$route.query.data
    this.loadListWidgetData()
    this.listGroupUserView()
  },
  methods: {
    /**
     * 个人积分记录
     */
    loadListWidgetData () {
      let params = {
        userId: this.$route.query.data.userId,
        size: this.page_size,
        current: this.pageNo
      }
      return new Promise((resolve, reject) => {
        Personalintergral.ScoreRecord(this, params).then(res => {
          if (res.data) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 人员详情
     */
    listGroupUserView () {
      let params = {
        userId: this.$route.query.data.userId
      };
      return new Promise((resolve, reject) => {
        SysUserController.view(this, params).then(res => {
          this.infoData = res.data
          this.infoData.deptIdDictMapname = res.data.deptIdDictMap.name
          this.infoData.userTypeDictMapname = res.data.userTypeDictMap.name
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadListWidgetData()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadListWidgetData()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadListWidgetData()
    },
    resetForm () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
h3{border-bottom: 1px solid #E9E9EB;padding: 0 0 10px;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
.el-form-info strong{margin: 0 10px;}
.el-form-info .el-time-picker{width: 100%;}
.title{
  display: flex;align-items: center;justify-content: space-between;
  h4{font-weight: bold;}
}
</style>
